<template>
    <div class="layout bg-slate-500 h-svh">
        <img src="@/assets/yezi.svg" alt="">
        <div class="font">
            <div class=" text-h1 leading-h1">
                我是页面级大标题 页面标题，大标题登录前页面标题
            </div>
            <div class=" text-h2 leading-h2">
                我是通用页面标题 商品详情标题
            </div>
            <div class=" text-h3 leading-h3">
                我卡片文字标题 商品卡片标题
            </div>
            <div class=" text-h4 leading-h4">
                我是正常文本 默认文本信息，内容字段
            </div>
            <div class=" text-h5 leading-h5">
                我是说明文字 提示信息，说明文字
            </div>
        </div>
        <div class="color flex justify-evenly">
            <div>
                <div class=" h-20 w-20 bg-main">
                </div>
                主颜色
            </div>
            <div>
                <div class=" h-20 w-20 bg-secondary">
                </div>
                副颜色
            </div>
            <div>
                <div class=" h-20 w-20 bg-h1c"></div>
                主要文本
            </div>
            <div>
                <div class=" h-20 w-20 bg-h2c"></div>
                副文本1
            </div>
            <div>
                <div class=" h-20 w-20 bg-h3c"></div>
                副文本2
            </div>
            <div>
                <div class=" h-20 w-20 bg-h4c"> </div>
                副文本3
            </div>
            <div>
                <div class=" h-20 w-20 bg-h5c"></div>
                反白文字
            </div>
        </div>
    </div>
</template>
